<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" >
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="../template.js"></script>
</head>
<body>
<div class="content container">
</div>
<div class="container">
    <ul class="list-inline">
        <li class="selectYear"></li>
        <li class="selectMonth"></li>
        <li class="selectDay">
            <select>
                <option>请选择日</option>
            </select>
        </li>
    </ul>
</div>
</div>
<script type="text/html" id="select">
    <select>
        {{each list as value}}
        <option>{{value}}</option>
        {{/each}}
    </select>
</script>
<script type="text/javascript">
    var arrYear = [];
    for(var i=1900;i<2017;i++){
        arrYear.push(i+1+"年");
    }
    var dataYear = {
        list:arrYear
    }
    var htmlYear = template("select",dataYear);
    $(".selectYear").html(htmlYear);

    var arrMonth = [];
    for(var i=0;i<12;i++){

        arrMonth.push(i+1+"月");
    }
    var dataSelect = {
        list: arrMonth
    };
    var html = template("select",dataSelect);
    $(".selectMonth").html(html);

    $(".selectMonth").find("select").on("change",function(){
        var _self =$(this);
        window._self = _self;
        var days;
        if(["4月","6月","11月"].indexOf(_self.val()) != -1){
            days = 30;
        }
        else if(["2月"].indexOf(_self.val()) != -1){
            days = 28;
        }
        else{
            days = 31;
        }
        var arrDay = [];
        for(var i =0;i<days;i++){
            arrDay.push(i+1+"日");
        }
        var dataDay = {
            list: arrDay
        };
        var htmlDay = template("select",dataDay);
        $(".selectDay").html(htmlDay);
    });
</script>
</body>
</html>